<template>
	<div>
		<ul>
			<li v-for="item in group" :key="item.asasas" class="zong">
				<h4>{{item.asasas}}<span class="zimu" v-if="item.asasas=='A'">(按字母排序)</span></h4>

				<ul class="a1">
					<router-link :to="{name:'dingwei',query:{id:items.id,name:items.name}}" v-for="items in item" :key='items.id'
					 class="flcs" tag="li">
						{{items.name}}
					</router-link>
				</ul>
			</li>
		</ul>

	</div>

</template>

<script>
	export default {
		name: "sycs",
		data() {
			return {
				group: []
			}
		},
		created() {
			this.sycs();
		},
		methods: {
			sycs() {
				let obj = this;
				this.$axios({
					url: "https://elm.cangdu.org/v1/cities?type=group",
					method: "get",
				}).then(function(res) {
					window.console.log(res.data);
					for (let i = 65; i < 91; i++) {
						let code = String.fromCharCode(i);
						if (res.data[code]) {
							res.data[code].asasas = code;
							obj.group.push(res.data[code]);
						}
					}
					window.console.log(obj.group)
				})
			}
		}
	}
</script>

<style scoped>
	.zong {
		margin-bottom: 18px;
		background-color: #fff;
		border-bottom: 1px solid #e4e4e4;
		overflow: hidden;
	}

	h4 {
		color: #666;
		text-indent: 20px;
		border-top: 2px solid #e4e4e4;
		border-bottom: 1px solid #e4e4e4;
		font-size: 30px;
		line-height: 60px;
		background-color: white;
	}

	.flcs {
		float: left;
		text-align: center;
		border-bottom: 1px solid #e4e4e4;
		border-right: 1px solid #e4e4e4;
		width: 25%;
		height: 82px;
		line-height: 82px;
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font: 30px/90px Microsoft YaHei;
	}

	ul {
		float: left;
		padding: 0;
		margin: 0;
		list-style: none;
		font-style: normal;
		text-decoration: none;
		border: none;
		color: #333;
		font-weight: 400;
		font-family: Microsoft Yahei;
		box-sizing: border-box;
		-webkit-tap-highlight-color: transparent;
		-webkit-font-smoothing: antialiased;

	}

	.zimu {
		font-size: .475rem;
		color: #999;
	}

	div {
		padding: 0;
		margin: 0;
		list-style: none;
		font-style: normal;
		text-decoration: none;
		border: none;
		color: #333;
		font-weight: 400;
		font-family: Microsoft Yahei;
		box-sizing: border-box;
		-webkit-tap-highlight-color: transparent;
	}
	.a1{
		zoom: 1;
	}
	.a1:after {
	    content: "";
	    display: block;
	    clear: both;
	}
</style>
